<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <!-- 
            data的两种写法：
                1.对象式：给data一个对象即可
                2.函数式：给data一个函数，函数内返回一个对象
            如何选择：组件中的data必须写函数式，否则会报错
            一个原则：由Vue管理的函数，一定不能写箭头函数，一旦写了箭头函数，这个函数指向对象就不再是vue了，而是window
         -->

        <div id="root1">
            <h1>{{name}}</h1>
        </div>

        <div id="root2">
            <h1>{{name}}</h1>
        </div>

        <script>
            // 第一种：对象式——给data一个对象
            const vm1 = new Vue({
                data: {
                    name: "xuhu",
                },
            });
            vm1.$mount("#root1");
        </script>
        <script>
            // 第二种：函数式——给data返回一个函数
            const vm2 = new Vue({
                // // 第一种函数式的写法，基础写法
                // data: function () {
                //     return {
                //         name: "xuhu",
                //     };
                // },
                // 第二种函数式的写法，更加简洁
                data() {
                    return {
                        name: "xuhu",
                    };
                },
            });
            vm2.$mount("#root2");
        </script>
    </body>
</html>
